<template>
  <h1>猜数字练习</h1>
  <input type="number" v-model="num" placeholder="请输入1~100之间的数字">
  <button @click="guess()">点击验证</button>
  <h4>{{ note }}</h4>
</template>

<script setup>
import {ref} from "vue";

const num = ref('');
const note = ref('');
// 生成随机数时 若未与页面产生映射关系 无需声明为响应式变量
let answer = parseInt(Math.random() * 100) + 1;
console.log(answer);
// const answer = ref(parseInt(Math.random() * 100) + 1);
// console.log(answer.value);
const guess = () => {
  if (num.value == answer/*.value*/) {
    note.value = ('猜对了');
  } else if (num.value > answer/*.value*/) {
    note.value = ('猜大了');
  } else if (num.value < answer/*.value*/){
    note.value = ('猜小了');
  }
};

</script>

<style scoped>

</style>